<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<!-- Load jQuery UI CSS  -->
	<h:outputStylesheet library="css"
		name="ui-lightness/jquery-ui-1.10.4.css"></h:outputStylesheet>

	<!-- Load jQuery JS -->
	<h:outputScript library="js" name="jquery-1.10.2.js"></h:outputScript>
	<!-- Load jQuery UI Main JS  -->
	<h:outputScript library="js" name="jquery-ui-1.10.4.js"></h:outputScript>
	<!-- Load Jquery internationalization -->
	<h:outputScript library="js" name="jquery.ui.datepicker-fr.js"></h:outputScript>
	<h:outputScript library="scripts" name="commons.js"></h:outputScript>
</h:head>

<h:body>
	<f:view>
		<ui:debug hotkey="x" />

		<h:form id="formulaire">
			<div id="calendarId"></div>

			<div id="contenu">
				<p>
					<h:inputHidden id="input1" value="#{datePickerBean.dateSelected}">
						<f:convertDateTime pattern="dd/MM/yyyy" />
					</h:inputHidden>
					<h:inputHidden id="input2" value="#{datePickerBean.data}">
					</h:inputHidden>
					<h:commandButton id="button1"
						actionListener="#{datePickerBean.getDatePicker}">
						<f:ajax execute="input1 input2" render="output" />
					</h:commandButton>
				</p>
			</div>
			<div id="tableau">
				<h:outputText id="output" value="#{datePickerBean.dateSelected}"></h:outputText>
			</div>
		</h:form>
	</f:view>
</h:body>
</html>
